<template>
	<view class="container">
		<cu-custom isBack bgColor="bg-white">
			<block slot="content">我的优惠券</block>
		</cu-custom>
		<h-tabs :data="typeList" :currentTab="typeCurrent" :width="750" backgroundColor="#fff"
			:itemWidth="750/typeList.length" @change="handlertypeChange" 
			selected-color="rgb(0, 123, 70)" bold height="80" 
			:sliderWidth="600/typeList.length" sliderBgColor="rgb(0, 123, 70)"></h-tabs>
		<view :style="{ height: 'calc(100vh - ' + CustomBar + 'px - 80rpx)' }">
			<mescroll-uni ref="mescrollRef" :down="downOption" @down="downCallback" 
				@up="upCallback" :up="upOption" :fixed="false">
				<view class="margin bg-white padding radius-sm" 
					v-for="(item, index) in listData" :key="index"
					@tap="$tools.to('/pages/order/detail')">
					
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				CustomBar: this.CustomBar,
				typeList: [{
					name: '可使用',
					key: ''
				},{
					name: '已使用',
					key: ''
				},{
					name: '已过期',
					key: ''
				}],
				typeCurrent: 0,
				listData: [],
				downOption: {
					use: true,
					auto: false,
				},
				upOption: {
					auto: true,
					noMoreSize: 5,
					textNoMore: "没有更多了",
					page: {
						num: 0,
						size: 10,
					},
					empty: {
						icon: "/static/img/none.png",
						tip: "当前暂无优惠券",
					}
				}
			}
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll(true);
			},
			upCallback(page) {
				this.mescroll.endBySize(10, 10)
				if(page.num == 1) this.listData = []
				this.listData = this.listData.concat([1,2,3,4,5,6,7,8,9,10])
			},
			handlertypeChange(e) {
				if(e.index !== this.typeCurrent) {
					this.typeCurrent = e.index
				}
			}
		}
	}
</script>

<style scoped>
</style>